<!-- 登录组件 -->
<template>
    <div class="login-center">
        <!-- 登录盒子 -->
        <div class="login-box">
        <!-- 头像 -->
        <div class="avatar-box">
            <img src="../assets/logo.png" alt="">
         </div>

     <!-- 登录表单区域 -->
            <el-form ref='loginForm' :model='loginform' :rules='formRule'  label-width="0px" class="login-form">
                <!-- 用户名 -->
                <el-form-item prop='username' >
               <el-input  v-model="loginform.username" prefix-icon="iconfont icon-user">
               </el-input>
                </el-form-item>
                <!-- 密码 -->
                 <el-form-item prop='password'>
                     <el-input  v-model="loginform.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
                </el-form-item>

                <!-- 按钮 -->
                <el-form-item class="login-button" >
                    
                  <el-button type="primary" @click='login'>登录</el-button>
                  <el-button type="info" @click='restForm'>重置</el-button>
                 </el-form-item>
            </el-form>
        </div>
  
    </div>
</template>

<script>
export default{
    data(){
        return {
            //登录表单绑定数据对象
            loginform:{
                username:'admin',
                password:'123456'
            },
            // 表单验证规则
            formRule:{
                username:[
                    {required:true,message:'请输入用户名',trigger:'blur'},
                    {min:3,max:10,message:'长度在3到10字符',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'请输入密码',trigger:'blur'},
                    {min:6,max:12,message:'长度在6到12字符',trigger:'blur'}
                ]
            }

        }
    },
    methods:{
        restForm(){
            this.$refs.loginForm.resetFields();
        },
        login(){
            this.$refs.loginForm.validate(async valid=>{
                if(!valid) return;
                // 验证错误 返回
                const {data:res}=await this.$http.post('login',this.loginform)
                if(res.meta.status!==200)return this.$message.error(res.meta.msg)
                
                // 提示框
                this.$message({
                    message:res.meta.msg,
                    type:'success'
                });

                // 登录成功 保存token到客户端
                window.sessionStorage.setItem('token',res.data.token);

                // 通过编程的导航跳转到主页面
                this.$router.push('/home')
                // 自己的接口
                // const re=await this.$http.post('http://127.0.0.1:8886/api/login',this.loginform)
                // console.log(re);
            })
        }
    }
}

</script>

<style scoped>
.login-center{
    background-color: #2b5b6b;
    height: 100%;
}
.login-box{
    width: 450px;
    height: 300px;
    background: #fff;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%); 
    border-radius: 10px;
}
.avatar-box{

    height: 130px;
    width: 130px;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
}
.avatar-box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
}
.login-form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
.login-form .login-button{
    /*弹性盒模型*/
    display: flex;
    justify-content: end;
    
    
}

</style>

